<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style id="system" type="text/css">h1, h2, h3, h4, h5, h6, p, blockquote {
        margin: 0;
        padding: 0;
    }

    body {
        font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
        font-size: 13px;
        line-height: 18px;
        color: #737373;
        margin: 10px 13px 10px 13px;
        padding: 20px;
    }

    img{
        width: 100%;
    }

    a {
        color: #0069d6;
    }

    a:hover {
        color: #0050a3;
        text-decoration: none;
    }

    a img {
        border: none;
    }

    p {
        margin-bottom: 9px;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #404040;
        line-height: 36px;
    }

    h1 {
        margin-bottom: 18px;
        font-size: 30px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 16px;
    }

    h5 {
        font-size: 14px;
    }

    h6 {
        font-size: 13px;
    }

    hr {
        margin: 0 0 19px;
        border: 0;
        border-bottom: 1px solid #ccc;
    }

    blockquote {
        padding: 13px 13px 21px 15px;
        margin-bottom: 18px;
        font-family: georgia, serif;
        font-style: italic;
    }

    blockquote:before {
        content: "";
        font-size: 40px;
        margin-left: -10px;
        font-family: georgia, serif;
        color: #eee;
    }

    blockquote p {
        font-size: 14px;
        font-weight: 300;
        line-height: 18px;
        margin-bottom: 0;
        font-style: italic;
    }

    code, pre {
        font-family: Monaco, Andale Mono, Courier New, monospace;
    }

    code {
        background-color: #fee9cc;
        color: rgba(0, 0, 0, 0.75);
        padding: 1px 3px;
        font-size: 12px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    pre {
        display: block;
        padding: 14px;
        margin: 0 0 18px;
        line-height: 16px;
        font-size: 11px;
        border: 1px solid #d9d9d9;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    pre code {
        background-color: #fff;
        color: #737373;
        font-size: 11px;
        padding: 0;
    }

    @media screen and (min-width: 768px) {
        body {
            /*width: 748px;*/
            margin: 10px auto;
        }
    }</style>
    <style id="custom" type="text/css"></style>
</head>
<body marginheight="0"><h2>WIN10-UI</h2>
<p>Win10-ui是一款win10风格的后台UI，让你轻松搭建一个别具一格的后台界面。

</p>
<p> | <a href="http://win10ui.yuri2.cn/">官网</a>
    | <a href="http://win10ui.yuri2.cn/src/demo.html">demo</a>
    | <a href="https://github.com/yuri2peter/win10-ui">github</a>
    | <a href="https://github.com/yuri2peter/win10-ui/archive/master.zip">下载</a>

</p>
<h2>预览</h2>
<p><img src="http://ojp71nnay.bkt.clouddn.com/win10-uiwin10-ui-5.png" alt="1">

</p>
<p><img src="http://ojp71nnay.bkt.clouddn.com/win10-uiwin10-ui-1.png" alt="1">

</p>
<p><img src="http://ojp71nnay.bkt.clouddn.com/win10-uiwin10-ui-4.png" alt="4">


</p>
<h2>特性</h2>
<ul>
    <li>Win10的动态磁贴，可定义方块大小，添加随机动画</li>
    <li>桌面图标自动排序</li>
    <li>任务栏结合iframe子窗口，与windows一致的窗口管理体验</li>
    <li>开始菜单+消息提示中心，满足后台UI的设计需求</li>
    <li>极少的API，大部分功能可用html元素定义完成</li>
    <li>响应式兼容，在手机浏览器也有不错的观感</li>
    <li>目前只保证对主流现代浏览器的兼容性支持</li>
</ul>
<h2>前置组件</h2>
<ul>
    <li>layer</li>
    <li>animated.css</li>
    <li>jquery</li>
    <li>font-awesome</li>
</ul>
<h2>使用说明</h2>
<h4>如何自定义桌面图标？</h4>
<pre><code class="lang-html">&lt;div id="win10-shortcuts"&gt;
     &lt;div class="shortcut" onclick="//do something..."&gt;
           &lt;div class="icon"&gt;&lt;img src="图片地址"/&gt;&lt;/div&gt;
           &lt;div class="title"&gt;图标底部文字&lt;/div&gt;
     &lt;/div&gt;
&lt;/div&gt;</code></pre>
<blockquote>
    <p>图标并不一定要求提供图片图标。图标的图片默认是填充整个div的（100%）。

    </p>
</blockquote>
<h4>如何自定义开始菜单列表?</h4>
<pre><code class="lang-html">&lt;div class="list win10-menu-hidden animated animated-slideOutLeft"&gt;
     &lt;div class="item"&gt;一级菜单&lt;/div&gt;
     &lt;div class="item"&gt;一级菜单&lt;/div&gt;
     &lt;div class="sub-item"&gt;二级菜单&lt;/div&gt;
     &lt;div class="sub-item"&gt;二级菜单&lt;/div&gt;
     &lt;div class="sub-item"&gt;二级菜单&lt;/div&gt;
     &lt;div class="item"&gt;一级菜单&lt;/div&gt;
     &lt;div class="item"&gt;一级菜单&lt;/div&gt;
&lt;/div&gt;</code></pre>
<blockquote>
    <p>一级菜单添加类item，二级添加sub-item。不需要用一级菜单“包裹”二级菜单，将自动识别二级菜单的归属，请注意排序。
        特别的，你可以为item(sub-item)的子项添加类"icon",将获得默认的图标样式，如下——
    </p>
    <pre><code class="lang-html">&lt;div class="item"&gt;
    &lt;span class=" icon fa fa-wrench fa-fw"&gt;&lt;/span&gt;
    &lt;span&gt;菜单项&lt;/span&gt;
&lt;/div&gt;</code></pre>
</blockquote>
<h4>如何自定义开始菜单磁贴?</h4>
<pre><code class="lang-html">&lt;div class="blocks"&gt;
    &lt;div class="menu_group"&gt;
        &lt;div class="title"&gt;磁贴组标题1&lt;/div&gt;
        &lt;div loc="1,1" size="1,1" class="block"&gt;
            &lt;div class="content"&gt;磁贴1&lt;/div&gt;
        &lt;/div&gt;
        &lt;div loc="2,1" size="1,1" class="block"&gt;
            &lt;div class="content"&gt;磁贴2&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="menu_group"&gt;
        &lt;div class="title"&gt;磁贴组标题2&lt;/div&gt;
        &lt;div loc="1,1" size="2,2" class="block"&gt;
            &lt;div class="content"&gt;磁贴3&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
<blockquote>
    <p>磁贴区域被分成若干小格，每一行最多6格。loc='x,y'中的x表示横坐标，y表示纵坐标（以左上方为1,1点）。size='w,h'中的w和h表示格子的宽度和高度（以格为单位）。

    </p>
</blockquote>
<h3>API</h3>
<ul>
    <li>调用：Win10-ui的api应当在其初始化之后被调用
        <pre><code class="lang-html">&lt;script&gt;
  Win10.onReady(function () {
      //Win10-ui初始化完成后将执行此处代码
  });
&lt;/script&gt;</code></pre>
    </li>
</ul>
<blockquote>
    <p>所有方法都需要加<code>Win10.</code>前缀。

    </p>
</blockquote>
<ul>
    <li><strong>openUrl(url,title) 打开一个子窗口</strong></li>
    <li>onReady(handle) win10-ui初始化完毕后的回调</li>
    <li>menuOpen() 开始菜单打开</li>
    <li>menuClose() 开始菜单关闭</li>
    <li>menuToggle() 开始菜单打开/关闭</li>
    <li>commandCenterOpen() 信息中心打开</li>
    <li>commandCenterClose() 信息中心关闭</li>
    <li>commandCenterToggle() 信息中心打开/关闭</li>
    <li>renderShortcuts() 重新渲染桌面图标(可用与动态添加或删除了桌面图标之后)</li>
    <li>renderMenuBlocks() 重新渲染磁贴(可用与动态添加或删除了磁贴之后)</li>
    <li>buildList() 重新预处理菜单列表(可用与动态添加或删除了菜单项之后)</li>
    <li>newMsg(title, content) 发送一个消息提醒</li>
    <li>isSmallScreen() 如果屏幕宽度小于768px返回true，否则返回false</li>
    <li>setBackgroundImg(img_url) 指定桌面背景图片</li>
    <li>setLoginImg(img_url) 指定登录界面背景图片</li>
    <li>setAnimated(animated_classes,animated_liveness)
        用css的类来设置磁贴动画。animated_liveness设置动画的触发概率(0~1)。animated_classes中存放css class数组，如<code>['class1','class2','class3-1
            class3-2']</code>。磁贴将随机选择一个动画来播放（最多3秒）。
    </li>
    <li>exit() 立即关闭整个页面</li>
    <li>login() 隐藏登录界面</li>
    <li>logout() 显示登录界面</li>
</ul>
<h2>未来开发计划</h2>
<ul>
    <li>多语言支持</li>
    <li>可拖拽磁贴</li>
    <li>多主题切换</li>
    <li>日历、音乐播放器等小组件</li>
</ul>
<h2>联系作者</h2>
<p>联系邮箱：yuri2peter@qq.com

</p>
<p>欢迎关注尤里2号的博客:<a href="https://yuri2.cn"></a><a href="https://yuri2.cn">https://yuri2.cn</a>

</p>
</body>
</html>